<template>
	<view class="page-bill">
		<view class="header">
			

			<view class="bottom">
				<view class="group">
					<text style="font-size: 24rpx;color:#9C9C9C;">支出 ￥2300.00</text>
				</view>
				<view class="group">
					<text style="font-size: 24rpx;color:#9C9C9C;">收入 ￥2300.00</text>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item, index) in lists" :key="index">
				<!-- <image class="icon" :src="item.icon" mode=""></image> -->
				<view class="info">
					<view class="top">
						<view class="title">
							<text style="font-size: 24rpx;color:#474747;">{{item.title}}</text>
						</view>
						<text style="font-size: 40rpx;color:#474747;">{{item.price}}</text>
					</view>
					<view class="bottom py-1">
						<text style="font-size: 24rpx;color:#9C9C9C;">{{item.date}}</text>
						<text style="font-size: 24rpx;color:#EE5A36;">{{item.status}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		
		data() {
			return {
				current: 1,
				months: [
					{
						label: "1月",
						value: 1
					},
					{
						label: "2月",
						value: 2
					}
				],
				lists: [
					{
						icon: '',
						title: "**商品",
						price: -3.14,
						date: "2023-05-03  12:00:00",
						status: "已经完成"
					},
					{
						icon: '',
						title: "水电费",
						price: -520.13,
						date: "2023-05-03  12:00:00",
						status: "等待对方确认订单"
					},
					{
						icon: '',
						title: "**商品",
						price: -3.14,
						date: "2023-05-03  12:00:00",
						status: "已经完成"
					},
					{
						icon: '',
						title: "水电费",
						price: -520.13,
						date: "2023-05-03  12:00:00",
						status: "等待对方确认订单"
					},
					{
						icon: '',
						title: "**商品",
						price: -3.14,
						date: "2023-05-03  12:00:00",
						status: "已经完成"
					},
					{
						icon: '',
						title: "水电费",
						price: -520.13,
						date: "2023-05-03  12:00:00",
						status: "等待对方确认订单"
					}
				]
			}
		},
		methods: {
			itemClick: function(item) {
			
				console.log("点击公告栏条目item = " + JSON.stringify(item));
				uni.showModal({
					title: '点击公告栏条目',
					content: "点击公告栏条目item = " + JSON.stringify(item)
				})
			},
		}
	}
</script>


<style lang="scss">
	.page-bill {
		box-sizing: border-box;
		padding: 20rpx;
		.block {
			height: 20rpx;
			background-color: #f3f3f3;
		}

		.search-bar {
			:deep(.ayi-input) {
				height: 60rpx;
				background-color: #f7f7f7;
			}
		}


		.header {
			padding: 32rpx 32rpx 0;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20rpx;

				.ayi-select {
					width: 230rpx;

					:deep(.ayi-select__value) {
						font-size: 32rpx;
						color: #474747;
					}
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				padding-bottom: 30rpx;

				.group {
					margin-right: 45rpx;

					.ayi-text {
						margin-right: 10rpx;
					}
				}
			}
		}

		.list {
			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				box-sizing: border-box;
				border-radius: 15rpx;
				background-color: #fff;
				padding: 30rpx 20rpx;
				margin-top: 20rpx;
				position: relative;

				&::after {
					content: "";
					width: 586rpx;
					height: 1rpx;
					background-color: #eee;
					position: absolute;
					bottom: 0;
					right: 32rpx;
				}

				.icon {
					width: 76rpx;
					height: 76rpx;
					margin-right: 24rpx;
				}

				.info {
					height: 76rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					flex: 1;

					.top,
					.bottom {
						.title {
							max-width: 400rpx;
						}

						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>